<template>
  <div>
    <span>我是父组件</span>
    <!-- <SonComponent :familyName='familyName' :symbolName=""></SonComponent> -->
    <SonComponent
      v-for="item in arr"
      :key="item.age"
      :symbolName="item.age"
      :id="item.id"
      @changeAge="addAge"
    ></SonComponent>
  </div>
</template>
 
<script>
import SonComponent from './SonComponent.vue'
export default {
  name: 'FatherComponent',
  components: {
    SonComponent
  },
  props: ['familyName'],
  data() {
    return {
      arr: [
        {
          id: 1,
          name: 'harry',
          age: 22
        },
        {
          id: 2,
          name: 'harry',
          age: 24
        },
        {
          id: 3,
          name: 'harry',
          age: 23
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    addAge(value, id) {
      console.log(value, id)
      this.arr.forEach((item) => {
        if (item.id === id) {
          item.age += value
        }
      })
    }
  }
}
</script>

<style scoped>
</style>